<template>
  <div class="bookingHistory-page">
    <GhNavBar title="我的预约"  />
    <div class="list-page">
      <van-tabs v-model:active="activeName"  title-active-color=" #04DBAC" @change="handleTabChange"  sticky offset-top="46px" >
        <van-tab title="全部"  name="allData">
          <MyList :data="allData"></MyList>
        </van-tab>
        <van-tab title="进行中"  name="Scheduled">
          <MyList :data="scheduledData"></MyList>
        </van-tab>
        <van-tab title="已取消" name="Cancelled">
          <MyList :data="cancelledData"></MyList>
        </van-tab>
        <van-tab title="已完成" name="Completed">
          <MyList :data="completedData"></MyList>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>



<script setup>
import {ref,reactive,onMounted,onBeforeMount} from "vue"
import GhNavBar from '@/components/gh-nav-bar.vue'
import MyList from '@/views/Home/appointment/components/MyList.vue'
import {getAppointmentData,getScheduledData,getCancelledData,getCompletedData } from '@/services/booking'
import {getuseridByaccount}from '@/services/others'
const activeName=ref('AllData')


//全部的数据响应式变量
const allData = ref([]);
//正在进行中的响应式变量
const scheduledData = ref([]);
//已完成数据响应式变量
const completedData = ref([]);
//已取消的响应式数据变量
const cancelledData=ref([])
const user_id=ref()

onBeforeMount(async()=>{
  const account=JSON.parse(localStorage.getItem('gh-user')).user.userData.account
   const res=await getuseridByaccount(account).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    })
   user_id.value=res.data.id
   init()
})

const init=async()=>{
  const all=await getAppointmentData(user_id.value).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    });
    allData.value=all.data
}


//切换不同tab标签时请求对应的数据
const handleTabChange=async(name)=>{
  switch (name) {
    case 'allData':
      const res=await getAppointmentData(user_id.value).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    });
    allData.value=res.data
      break;
    case 'Scheduled':
    const scheduled=await getScheduledData(user_id.value).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    });
    scheduledData.value=scheduled.data
      break;
    case 'Cancelled':
     const cancelled= await getCancelledData(user_id.value).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    });
    cancelledData.value=cancelled.data
      break;
    case 'Completed':
     const completed= await getCompletedData(user_id.value).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    });
    completedData.value=completed.data
      break;
  }
}



</script>

<style lang="scss" scoped>
  .bookingHistory-page{
    width: 100%;
    
     .list-page{
       .van-tabs{
        width: 100%;

        /* background-color: #f5f5f5; */
       }
     }
}
</style>
